<template>
	<div class="system-dept-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-dept-search mb15">
				<el-button size="default" type="success" class="ml10" @click="onOpenAddDept('add')">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增作业
				</el-button>
			</div>
			<el-table
				:data="state.tableData.data"
				v-loading="state.tableData.loading"
				style="width: 100%"
				row-key="id"
				default-expand-all
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			>
				<el-table-column prop="hid" label="hid" show-overflow-tooltip />
				<el-table-column prop="name" label="作业名称" show-overflow-tooltip />
				<el-table-column prop="starttime" :formatter="getLocalTime" label="发布日期" show-overflow-tooltip />
				<el-table-column prop="endtime"   :formatter="getLocalTime1" label="结束日期" show-overflow-tooltip />
				<el-table-column prop="content" label="作业要求" show-overflow-tooltip />
				<el-table-column label="操作">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onOpenEditDept('edit', scope.row)">修改</el-button>
						<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row.hid)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<DeptDialog ref="deptDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemDept">
import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { scriptApi } from '/@/api/script';
import { homeworkApi } from '/@/api/homework';

// 引入组件
const DeptDialog = defineAsyncComponent(() => import('/@/views/system/dept/dialog.vue'));

// 定义变量内容
const deptDialogRef = ref();
const state = reactive<SysDeptState>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});

// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	state.tableData.data = [];
	state.tableData.data.push({
		deptName: 'vueNextAdmin',
		createTime: new Date().toLocaleString(),
		status: true,
		sort: Math.random(),
		describe: '顶级部门',
		id: Math.random(),
		children: [
			{
				deptName: 'IT外包服务',
				createTime: new Date().toLocaleString(),
				status: true,
				sort: Math.random(),
				describe: '总部',
				id: Math.random(),
			},
			{
				deptName: '资本控股',
				createTime: new Date().toLocaleString(),
				status: true,
				sort: Math.random(),
				describe: '分部',
				id: Math.random(),
			},
		],
	});
	state.tableData.total = state.tableData.data.length;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};

function getLocalTime(value: any) {
	let time =
		value.starttime[0] +
		'-' +
		value.starttime[1] +
		'-' +
		value.starttime[2] +
		' ' +
		value.starttime[3] +
		':' +
		value.starttime[4] +
		':' +
		value.starttime[5]
	return time
}
function getLocalTime1(value: any) {
	let time =
		value.endtime[0] +
		'-' +
		value.endtime[1] +
		'-' +
		value.endtime[2] +
		' ' +
		value.endtime[3] +
		':' +
		value.endtime[4] +
		':' +value.endtime[5]
	return time
}
//获取作业数据
const onRadioChange = async () => {
	scriptApi()
		.getHomeWork()
		.then((res) => {
			state.tableData.data = res.data;
			console.log(state.tableData.data)
			// console.log(res)
		});
};

// 打开新增菜单弹窗
const onOpenAddDept = (type: string) => {
	deptDialogRef.value.openDialog(type);
};
// 打开编辑菜单弹窗
const onOpenEditDept = (type: string, row: DeptTreeType) => {
	localStorage.setItem('data', JSON.stringify(row));
	deptDialogRef.value.openDialog(type, row);
};
// 删除当前行
const onTabelRowDel = async (hid: any) => {
	console.log(hid)
	await ElMessageBox.confirm('确定要删除吗？', '删除提醒', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
	}).catch(() => {
		ElMessage.info('删除操作被取消!');
		return new Promise(() => {});
	});
	homeworkApi()
		.deleteHomework(hid)
		.then((res) => {
			if (res.code === 1) {
				ElMessage.success('删除成功');
				location.reload();
			} else {
				ElMessage.error('删除菜单失败');
			}
		});
};
// 页面加载时
onMounted(() => {
	onRadioChange(), getTableData();
});
</script>
